<template>
  <div>
    <!-- 最外层容器 -->
    <el-container>

      <!-- 顶栏 -->
      <el-header class="layout-header">
        <div class="login-user">
          <span class="welcome">欢迎回来, <b>{{ userInfo.username }}</b> !</span>
          <el-dropdown :hide-on-click="false" @command="handleCommand">
            <el-avatar shape="square" size="medium" :src="userInfo.avatar"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user-solid" command="gotoUserInfo">个人信息</el-dropdown-item>
              <el-dropdown-item icon="el-icon-right" command="openLogoutConfirm">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <h1>来客食堂运营管理平台</h1>
      </el-header>
      <!-- 下半部分容器 -->
      <el-container class="layout-body">
        <!-- 左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu router
                   :default-active="$router.currentRoute.path"
                   class="el-menu-vertical-demo"
                   mode="vertical"
                   background-color="#fff"
                   text-color="black"
                   active-text-color="#41414c">
            <!-- 主页 -->
            <el-menu-item index="/admin/index">
              <i class="el-icon-s-home"></i>
              <span>主页</span>
            </el-menu-item>
            <!-- 1.员工管理 -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>员工管理</span>
              </template>
              <el-menu-item index="/admin/account/user">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/account/login-log">
                <i class="el-icon-date"></i>
                <span>登录日志</span>
              </el-menu-item>
            </el-submenu>
            <!-- 2.菜品管理 -->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>菜品管理</span>
              </template>
              <el-menu-item index="/admin/ListDish">
                <i class="el-icon-food"></i>
                <span>菜品列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/InsertDish">
                <i class="el-icon-circle-plus-outline"></i>
                <span>菜品上新</span>
              </el-menu-item>
            </el-submenu>
            <!-- 3.订单管理 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/admin/mall/order/order-list">
                <i class="el-icon-s-unfold"></i>
                <span>查看订单列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/order/order-details">
                <i class="el-icon-s-operation"></i>
                <span>订单详情列表</span>
              </el-menu-item>
            </el-submenu>
            <!-- 4.库存管理 -->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>库存管理</span>
              </template>
              <el-menu-item index="/admin/stock/purchase">
                <i class="el-icon-truck"></i>
                <span>入库管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/stock/stockout">
                <i class="el-icon-sell"></i>
                <span>出库管理</span>
              </el-menu-item>
            </el-submenu>
            <!-- 5.门店管理 -->
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>门店管理</span>
              </template>
              <el-menu-item index="/admin/table">
                <i class="el-icon-location"></i>
                <span>桌台管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <!-- 右侧主体 -->
        <el-main class="layout-main">
          <div class="body">
            <!-- 页面的主体部分将由其它视图组件来显示 -->
            <router-view/>
          </div>
          <div class="copyright">
            <p>Copyright &copy;  公司名称：来客食堂食品股份有限公司  </p>
            <p> 公司地址：四川省成都市天府街道  |  电话：028-25099000</p>
          </div>
        </el-main>

      </el-container>
    </el-container>

  </div>
</template>

<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
  data(){
    return{
      loginInfo:{},
      userInfo: {
        username: '',
        avatar: '',
      },
    }
  },
  methods: {
    // 加载当前登录的用户信息
    loadCurrentLoginInfo(){
      let loginInfoString = localStorage.getItem('loginInfo');
      this.loginInfo = JSON.parse(loginInfoString);
      let url = BaseUrl.ADMIN_ACCOUNT + '/users/' + this.loginInfo.id;
      console.log('url = ' + url)
      TokenAxios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 20000){
          this.userInfo = jsonResult.data;
        }else {
          let title = '操作失败';
          this.$alert(message, title,{
            confirmButtonText: '确定',
            callback:action => {}
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = "执行程序过程中出现错误，请打开浏览器的控制台查看详细错误信息!";
        this.$alert(message,title,{
          confirmButtonText:'确定',
          callback:action => {}
        });
        console.log(error)
      })
    },
    // 处理点击头像的下拉菜单项
    handleCommand(command){
      console.log(command)
      if (command === 'gotoUserInfo'){
        this.gotoUserInfo();
      }else if (command === 'openLogoutConfirm'){
        this.openLogoutConfirm();
      }
    },
    // 点击跳转到个人信息
    gotoUserInfo(){
      this.$router.push('/admin/account/user/userInfo');
    },
    // 点击退出登录选项
    openLogoutConfirm(){
      let message = '您确定退出登录吗？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleLogout();
      }).catch(() => {
      })
    },
    // 处理退出登录功能
    handleLogout(){
      let url = BaseUrl.PASSPORT + '/passport/logout';
      console.log('url = ' + url);

      TokenAxios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000){
          this.$message({
            message: '退出登录成功！',
            type: 'success',
          });
          localStorage.removeItem('loginInfo');
          this.$router.push('/login');
        }else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
  },
  mounted() {
    this.loadCurrentLoginInfo();
  }
}
</script>

<style>
body{margin: 0;}
/*头部样式*/
.layout-header { background: #669212; color: #fff;}
.layout-header h1{margin: 0;line-height: 60px;font-size: 20px;}
.layout-header .login-user{float: right;display: flex;margin-top: 12px;}
.layout-header .login-user .welcome{line-height: 36px; margin-right: 10px;}
/*下半部分容器样式*/
.layout-body { position: absolute;top: 60px; bottom: 0; left: 0;right: 0;}
/*左侧边栏样式*/
.layout-aside { background: #fff;}/*#65659a #574c6a*/
.layout-aside i{ color: black !important;}
.layout-aside .el-menu {border: 0;}
/*.el-menu-item.is-active {background: #cdcccc !important;}*/
/*右边主体样式*/
.layout-main { background: #ddd}
.layout-main .body{ background: #fff; padding: 30px 30px 10px 30px; }
.layout-main .copyright p { color: #666; font-size: 11px; text-align: center;}
</style>
